<template>
  <div class="photoinfo-contaioner">
    <h3>{{ photoinfo.title }}</h3>
    <p class="subtitle">
      <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
      <span>点击次数：{{ photoinfo.click }}次</span>
    </p>
    <hr>
    <vue-preview
      :list="list"
      :tapToClose="true"
      class="thumbImg-container"
      @close="closeHandler"
      @destroy="destroyHandler"
    />
    <div class="content" v-html="photoinfo.content"></div>
    <cmt-box :id="id"></cmt-box>
  </div>
</template>
<script>
import comment from '../subcomponents/comment.vue'
import { Toast } from 'mint-ui'
export default {
  data(){
    return{
      id: this.$route.params.id,
      photoinfo: {},
      list: []
    }
  },
  created(){
    this.getPhotoInfo()
    this.getThumbo()
  },
  methods:{
    getPhotoInfo(){
      this.axios.get('api/getimageInfo/'+this.id)
      .then( response =>{
        // console.log(response)
        this.photoinfo = response.data.message[0]
      })
      .catch( error =>{
        Toast('获取图片详情失败')
      })
    },
    getThumbo(){
      this.axios.get('api/getthumimages/'+this.id)
      .then( response =>{
        response.data.message.forEach( item =>{
          item.w = 600
          item.h = 400
        })
        this.list = response.data.message
        console.log(this.list)
      })
      .catch( error =>{
        console.log(error)
        Toast('获取缩略图失败')
      })
    },
    closeHandler() {
      console.log('closeHandler')
    },
    destroyHandler() {
      console.log('destroyHandler')
    }
  },
  components:{
    'cmt-box':comment
  }
}
</script>
<style lang="scss">
  .photoinfo-contaioner{
    padding:3px;
    h3{
      color:#26a2ff;
      font-size:15px;
      text-align: center;
      margin:15px 0;
    }
    .subtitle{
      display:flex;
      justify-content: space-between;
      font-size:13px;
    }
    .content{
      font-size:13px;
      line-height:30px;
    }
    .thumbImg-container>div:first-child{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-around;
      padding:0 10px;
      .thumbImg{
        margin:8px 0 !important;
      }
    }
    
  }
</style>
